<template>
  <div>
    <div class="platform_smuggle_num">
      <a-row type="flex">
        <a-col :span="8" v-for="(item, i) in smuggleDatas" :key="i">
          <a-card bordered>
            <template slot="cover">
              <div>
                <h4>{{ item.platform }}</h4>
                <h3>{{ item.totalNum }}</h3>
                <!-- <h3>{{ item.num }}</h3> -->
              </div>
              <div class="cover-right">
                <img height="50" :src="item.ico" style="max-width: 100px" />
                <a-tooltip placement="topRight">
                  <template slot="title">
                    <span>历史总数每10分钟更新一次</span>
                  </template>
                  <a-icon type="exclamation-circle" />
                </a-tooltip>
              </div>
            </template>
            <a-card-meta>
              <template slot="description"> 今日推送 {{ item.num }} </template>
              <!-- <template slot="description"> 历史总数 {{ item.totalNum }} </template> -->
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-card title="关键词云" style="margin-bottom: 20px">
      <div class="cloud-wrap" v-if="cloudData && cloudData.length > 0">
        <wordCloud class="cloud-box" :wordData="cloudData" :sizeRange="[15, 80]" height="500px" />
        <div class="cloud-table">
          <a-row type="flex">
            <div :span="24" class="title">高频关键词</div>
          </a-row>
          <a-row type="flex" style="max-height: 450px; overflow-y: auto">
            <a-col :span="24" v-for="(item, i) in cloudData" :key="i">
              <span class="index">{{ PrefixZero(i + 1, 2) }}</span>
              <span class="name"> {{ item.name }}</span>
              <span class="nums"> {{ item.value }} / 条</span>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="cloud-wrap graph-box" style="min-height: 300px" v-else>
        <a-empty description="暂无关键词云数据" />
      </div>
    </a-card>
  </div>
</template>

<script>
import * as homeApi from '@/api/smuggle/home.js'
import wordCloud from '@/components/echarts/wordCloud.vue'
export default {
  components: { wordCloud },
  data() {
    return {
      smuggleDatas: [
        {
          platform: '淘宝',
          platformKey: 'tbNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform1.png'),
        },
        {
          platform: '闲鱼',
          platformKey: 'xyNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform2.png'),
        },
        {
          platform: '微博',
          platformKey: 'wbNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform3.png'),
        },
        {
          platform: '贴吧',
          platformKey: 'tiebaNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform4.png'),
        },
        {
          platform: '朋友圈',
          platformKey: 'pyqNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform5.png'),
        },
        {
          platform: '其他',
          platformKey: 'otherNumDto',
          num: '0',
          totalNum: '0',
          ico: require('@/assets/icon/platform6.png'),
        },
      ],
      cloudData: [],
      timer: null,
    }
  },
  created() {},
  mounted() {
    Promise.all([this.getHomeApi()]).then(() => {
      // 设置定时器-10分钟刷新一次
      this.timer = setInterval(() => {
        this.getHomeApi()
      }, 600000)
    })
  },
  //离开当前页面后执行
  destroyed: function () {
    console.log('离开页面时，销毁定时器')
    clearInterval(this.timer)
  },
  methods: {
    // 头部汇总数据
    async getHomeApi() {
      try {
        let res = await homeApi.getHome(this.queryParam)
        if (res && res.success) {
          let data = Object.keys(res.result).length > 0 ? res.result : {}
          let data_source = data.sourceSummaryDto ? data.sourceSummaryDto : {}
          let data_keyword = data.keywordList ? data.keywordList : []
          for (let key in data_source) {
            let num = data_source[key].num ? data_source[key].num : 0
            let totalNum = data_source[key].totalNum ? data_source[key].totalNum : 0
            for (let item of this.smuggleDatas) {
              if (key === item.platformKey) {
                this.$set(item, 'num', num)
                this.$set(item, 'totalNum', totalNum)
              }
            }
          }
          this.cloudData = data_keyword.map((item) => {
            return {
              name: item.label,
              value: item.value,
            }
          })
          // 数组对象排序
          this.cloudData = this.arrSort(this.cloudData, 'value')
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        this.$message.error('出错了')
      }
    },
    /**
     * 自定义函数名：PrefixZero
     * @param num： 被操作数
     * @param n： 固定的总位数
     */
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n)
    },
    /**
     * 自定义函数名：arrSort
     * @param arr： 被操作数
     * @param key： 需要用作排序的key名
     */
    arrSort(arr, key) {
      arr.sort(function (a, b) {
        return b[key] - a[key]
      })
      return arr
    },
  },
}
</script>

<style lang="less" scoped>
.platform_smuggle_num {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding-top: 20px;
  margin: 20px 0;
  /deep/.ant-card {
    // min-width: 220px;
    // max-width: 220px;
    width: 300px;
    padding: 10px 10px 0 10px;
    margin: 0 auto 20px;
  }
  /deep/.ant-card-cover {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 14px;
      font-weight: 600;
    }
    h3 {
      font-size: 18px;
    }
    .cover-right {
      position: relative;
      text-align: center;
      // flex: 1;
      .anticon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  /deep/.ant-card-body {
    padding: 6px;
    border-top: 1px solid #e8e8e8;
    .ant-card-meta-description {
      color: #666;
    }
  }
}
.cloud-wrap {
  display: flex;
  align-items: flex-start;
  text-align: left;
  .cloud-box {
    flex: 0 0 55%;
    width: 55%;
    height: 500px;
  }
  .cloud-table {
    border: 1px solid #ccc;
    width: 100%;
    .title {
      font-weight: bold;
      font-size: 16px;
      width: 100%;
      background-color: #fafafa;
      padding: 12px;
      border-bottom: 1px solid #ccc;
    }
    .ant-col {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      // border-left: 1px solid #ccc;
      .index,
      .name,
      .nums {
        padding: 10px;
        flex: 1;
      }
      .index {
        border-right: 1px solid #ccc;
        flex: 0 0 60px;
        background-color: #fafafa;
      }
      .nums {
        border-left: 1px solid #ccc;
        flex: 0 0 120px;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:nth-of-type(2n) {
        border-left: 0;
      }
    }
  }
  &.graph-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: inherit;
  }
}
</style>
